<template>
	<view class="wrap">
		<view class="header-wrap">
			<view class="header-nav">
				<view class="nav-logo">
					<u--image src="../../static/images/logo.svg" width="63px" height="30px"></u--image>
				</view>
				<view class="nav-li">
					<u--input
					    placeholder="搜索"
						placeholderStyle="font-size: '14px';color: '#2e303399'"
						style="width: 89%;height: 22px;border-radius: 20px; border: none;background-color: #F7F8FA;"
					    v-model="searchValue"
					    @change="searchChange"
						@focus="searchFocus"
					  >
					  <template slot="prefix">
					  	<u--image src="../../static/images/search.svg" width="17px" height="18px" mode=""></u--image>
					  </template>
					 
					  </u--input>
				</view>
				<view class="nav-menus" @click="bindMore">
					<u--image src="../../static/images/menu.svg" width="16px" height="16px"></u--image>
				</view>
			</view>
			<view class="search">
				<u-swiper
					height="390"
					radius="20"
					keyName="image"
					showTitle
					:autoplay="false"
					circular
					:list="swiperList"
				></u-swiper>
			</view>
			<view>
				<u-tabs :list="tabList" :current="tabIndex" @click="bindTabclick"></u-tabs>
			</view>
			<view v-if="tabIndex == 0">
				<view class="hot-wrap">
					
					<view class="hot-list">
						<view class="tit-l">
							<view class="pointImage"></view>
							<view style="display: inline-block;vertical-align: middle;color: #2E3033;font-size: 14px;">四川上千名森林消防员下沉一线防火患</view>
						</view>
					</view>
					<view class="hot-list">
						<view class="tit-l">
							<view class="pointImage"></view>
							<view style="display: inline-block;vertical-align: middle;color: #2E3033;font-size: 14px;">迈向首飞!HH-100航空商用无人运输系统验证...</view>
						</view>
					</view>
				</view>
				
				<view class="new-list">
					<view class="new-list-tit">
						视频资询
					</view>
					<view class="new-list-tit-line"></view>
					<view class="content-list">
						<u-row gutter="10" align="center" customStyle="margin-bottom: 10px">
							<u-col span="6"  style="box-shadow: 0px 3px 6px 1px #EEE8E8;">
								<view class="demo-layout bg-purple-light">
									<view style="width: 100%;height: 167px;position: relative;">
										<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
										<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
											<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
											<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
										</view>
									</view>
									<view style="text-align: left;box-sizing: border-box;padding: 15px;">
										<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
										<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
									</view>	
								</view>
							</u-col>
							<u-col span="6"  style="box-shadow: 0px 3px 6px 1px #EEE8E8;">
								<view class="demo-layout bg-purple-light">
									<view style="width: 100%;height: 167px;position: relative;">
										<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
										<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
											<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
											<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
										</view>
									</view>
									<view style="text-align: left;box-sizing: border-box;padding: 15px;">
										<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
										<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
									</view>	
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			
			<view v-if="tabIndex == 1">
				<indexList></indexList>
			</view>
		</view>
		
		<!-- 更多弹框 -->
		<u-popup 
		mode="center" 
		:show="moreShow" 
		:round="10" 
		:safeAreaInsetBottom="false"
		@close="bindClose"
		@open="bindOpen">
			<view style="width: 315px;padding: 15px;border-radius: 10px;">
				<view class="more-tit">更多</view>
				<view class="more-btn" @click="bindToDo('report')">
					<u--image 
					src="../../static/images/jubao.svg" 
					width="16px" 
					height="16px"
					mode="" 
					style="vertical-align: middle;display: inline-block;margin-right: 10px;"></u--image>
					一键举报
				</view>
				<view class="more-btn" @click="bindToDo('feedback')">
					<u--image
					src="../../static/images/yijian.svg" 
					width="16px" 
					height="16px"
					mode="" 
					style="vertical-align: middle;display: inline-block;margin-right: 10px;"></u--image>
					意见反馈
				</view>
			</view>
		</u-popup>
				
	</view>
</template>

<script>
	import indexList from '../components/indexList/indexList.vue'
	export default {
		data() {
			return {
				tabIndex: 0,
				searchValue: '',
				moreShow: false,
				swiperList: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '关于开展社会应急无人机资源调研的函',
					}
				],
				tabList: [
					{name: '分类1'},
					{name: '分类2'},
				]
			}
		},
		components: {
			indexList
		},
		computed: {
		},
		methods: {
			bindTabChange(item) {
				// TODO 优化：切换时，页面有加载时长
				console.log(item);
				let {index} = item;
				this.tabIndex = index;
			},
			searchChange() {},
			searchFocus() {
				uni.navigateTo({
					url: '/pages/components/searchClassification/index'
				})
			},
			bindMore() {
				this.moreShow = true
			},
			bindClose() {
				this.moreShow = false
				
			},
			bindOpen() {},
			bindToDo(type) {
				if(type === 'report') {
					uni.navigateTo({
						url: '/pages/components/report/index'
					})
				}
				if (type === 'feedback') {
					uni.navigateTo({
						url: '/pages/components/feedback/index'
					})
				}
			},
			bindTabclick() {}
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	// ::v-deep .u-tabs__wrapper__nav__line {
	// 	transform: translate(25px) !important;
	// }
	
</style>
<style lang="scss" scoped>
$txtcolor: #2E3033;
$w100: 100%;
$h100: 100%;

.wrap {
	width: $w100;
	box-sizing: border-box;
	
	.header-wrap {
		
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		
		.header-nav {
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.nav-logo {
				width: 63px;
			}
			.nav-li {
				flex: 1;
			}
			.nav-menus {
				width: 20px;
			}
		}
		.search {
			margin-top: 17px;
			margin-bottom: 15px;
		
			.search-btn {
				width: 58px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				background: #EF312A;
				border-radius: 14px 14px 14px 14px;
				color: #fff;
				font-size: 14px;

			}
		}
		.hot-wrap {
			width: 100%;
			height: 154px;
			
			background: #FFFFFF;
			box-shadow: 0px 3px 6px 1px #EEF1F3;
			border-radius: 10px 10px 10px 10px;
			box-sizing: border-box;
			padding: 14px 15px;

			box-sizing: border-box;
			
			.hot-tit {
				display: flex;
				align-items: center;
				
				.tit-l {
					flex: 1;
					text-align: left;
					
					.pointImage {
						display: inline-block;vertical-align: middle;margin-right: 10px;
						width: 5px;height: 5px;
						background-color: #2E3033;
						border-radius: 50%;
						vertical-align: middle;
					
					}
				}
				.tit-r {
					flex: 1;
					font-size: 12px;
					color: #1d1f2099;
					text-align: right;
					margin-left: 5px;
				}
			}
			.hot-list {
				margin-top: 15px;
				
				.tit-l {
					flex: 1;
					text-align: left;
					
					.pointImage {
						display: inline-block;vertical-align: middle;margin-right: 10px;
						width: 5px;height: 5px;
						background-color: #2E3033;
						border-radius: 50%;
						vertical-align: middle;
					
					}
				}
				.tit-r {
					flex: 1;
					font-size: 12px;
					color: #1d1f2099;
					text-align: right;
					margin-left: 5px;
				}
			}
		}
		.new-list {
			width: 100%;
			display: block;
			margin-top: 30px;
			
			.new-list-tit {
				font-weight: normal;
				font-size: 16px;
				color: #EF312A;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 15px;
			}
			.new-list-tit-line {
				width: 100%;
				height: 2px;
				background: #EF312A;
				border-radius: 0px 0px 0px 0px;
			}
			.content-list {
				margin-top: 15px;;
			}
		}
	}
	
	.demo-layout {
		height: 249px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px 1px #EEE8E8;
		border-radius: 10px 10px 10px 10px;
	}
}

.more-tit {
	font-weight: normal;
	font-size: 16px;
	color: #2E3033;
	line-height: 0px;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 15px;
	margin-bottom: 30px;
}
.more-btn {
	width: 100%;
	height: 50px;
	
	background: #F7F8FA;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	line-height: 50px;
	margin-bottom: 10px;
	
	font-weight: normal;
	font-size: 14px;
	color: #2E3033;
	font-style: normal;
	text-transform: none;

}
</style>

<style scoped lang="scss">
::v-deep .u-line-1 {
	text-align: center !important;
}

::v-deep .u-col-6:nth-child(n) {
	padding-right: 5px !important;
}
::v-deep .u-col-6:nth-child(2n) {
	padding-left: 5px !important;
}
</style>
